<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.detail')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <validator name="form">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.manufacture')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.manufacture" v-validate:manufacture="{required: true}">
            <strong class="text-danger my-error" v-if="$form.manufacture.required">{{$t('error.required')}}</strong>
          </div>
        </div>  
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.productModelsStr')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.productModelsEdit" :placeholder="$t('tip.seg')" v-validate:product-models-edit="{required: true}">
            <strong class="text-danger my-error" v-if="$form.productModelsEdit.required">{{$t('error.required')}}</strong>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.mainPathFmt')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.mainPathFmt" v-validate:main-path-fmt="{required: true}">
            <strong class="text-danger my-error" v-if="$form.mainPathFmt.required">{{$t('error.required')}}</strong>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('list.subPathFmt')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="cfg.subPathFmt" v-validate:sub-path-fmt="{required: true}">
            <strong class="text-danger my-error" v-if="$form.subPathFmt.required">{{$t('error.required')}}</strong>
          </div>
        </div>
      </form> 
    </validator>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import locales from '../locales/ipcamVendor.js'
import {printObj, copyObj} from 'libs/utils.js'
import * as actions from 'share/server/vuex/actions/streamsrc.js'
import {streamSrcApi} from 'share/server/api.js'

export default {
  locales,
  vuex: {
    actions
  },
  data () {
    return {
      show: false,
      cfg: {
        _id: -1,
        manufacture: '',
        productModels: '',
        productModelsEdit: '',
        mainPathFmt: '',
        subPathFmt: ''     
      }
    }
  },
  methods: {
    onQuit () {
      this.show = false
    },
    onSaveChanges () {
      if (this.$form.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      let models = this.cfg.productModelsEdit.split('|')
      this.cfg.productModels = JSON.stringify(models)

      streamSrcApi.setItem('ipcamVendorCfgs', this.cfg).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.doLoadVendors()
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
      this.show = false
    },
    onShow (val) {
      copyObj(this.cfg, val)
      this.show = true
    }
  },
  ready () {
    ebus.on('show-vendor-detail', this.onShow)
  }
}
</script>

<style>
</style>